<template>
  <div class="form">
    <el-form :label-width="labelWidth" ref="formRef">
      <el-row>
        <template v-for="item in formItems" :key="item.label">
          <el-col v-bind="colStyle">
            <el-form-item v-if="!item.isHidden" :label="item.label" :style="itemStyle" :rules="item.rules">
              <template v-if="item.type === 'input'">
                <el-input
                  :model-value="modelValue[item.prop]"
                  @update:modelValue="handleModelValue($event, item.prop)"
                  :placeholder="item.placeholder"
                ></el-input>
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select
                  style="width: 100%"
                  :model-value="modelValue[item.prop]"
                  @update:modelValue="handleModelValue($event, item.prop)"
                  placeholder="请选择"
                >
                  <el-option v-for="item in item.options" :key="item.value" :label="item.text" :value="item.value">
                    {{ item.text }}
                  </el-option>
                </el-select>
              </template>
              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker
                  v-bind="item.datepickerOptions"
                  :model-value="modelValue[item.prop]"
                  @update:modelValue="handleModelValue($event, item.prop)"
                ></el-date-picker>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <slot name="footer"></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import type { IFormItems } from './type'
export default defineComponent({
  props: {
    modelValue: {
      type: Object,
      required: true
    },
    formItems: {
      type: Array as PropType<IFormItems[]>,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    itemStyle: {
      type: String,
      default: 'padding: 10px 30px'
    },
    colStyle: {
      type: Object,
      default: () => ({
        xs: 24,
        sm: 24,
        md: 12,
        lg: 8,
        xl: 6
      })
    }
  },
  setup(prop, { emit }) {
    // 这里不能直接使用父组件传来的data，并且修改，vue不提倡修改props
    // 方法一：可以利用组件的v-model，并且自定义属性，拷贝于props并监听，这样模板中直接使用v-model
    // const formData = ref({ ...prop.modelValue })
    // watch(formData, (newValue) => emit('update:modelValue', newValue), { deep: true })

    const handleModelValue = (newVal, field) => {
      emit('update:modelValue', { ...prop.modelValue, [field]: newVal })
    }

    const formRef = ref()
    const validateForm = () => {
      console.log(1111111)
      let resBool = false
      formRef.value.validate((valid) => {
        resBool = valid ? true : false
      })
      return resBool
    }
    return {
      handleModelValue,
      formRef,
      validateForm
    }
  }
})
</script>

<style scoped>
.form {
  padding-top: 22px;
}
</style>
